<!-- 用户列表 memberList -->
<template>
  <div class="content">
    <el-form :model="query" ref="form" size="medium" class="search-form">
      <el-form-item>
        <el-input v-model="query.keyword" placeholder="请输入账号ID/手机号码" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="query.nickName" placeholder="请输入用户艺名" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <!-- <el-form-item label="" prop="timeRange">
        <TimeRangePicker v-model="query.timeRange" type="datetimerange" :defaultTime="['00:00:00', '23:59:59']"
                         startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
      </el-form-item> -->
      <el-form-item label="" prop="status">
        <el-select v-model="query.status" placeholder="请选择帐号启用状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="10px">
        <Cbutton @click="handleSearch" :btnloading="tableLoading">查询</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit stripe @selection-change="handleSelectionChange"
                @sort-change="sortTableData">
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="id" label="用户ID" sortable align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号码" align="center"></el-table-column>
        <el-table-column prop="nickname" label="用户艺名" align="center"></el-table-column>
        <el-table-column prop="walletIntegration" label="可用积分" sortable align="center">
          <template slot-scope="props">
            <span class="click-ele" @click="handleOpenLog(props.row)">{{props.row.walletIntegration || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="账户启用状态" align="center">
          <template slot-scope="props">
            <!-- 0->禁用；1->启用 , -->
            <el-tag v-if="props.row.status === 0" size="small" type="danger">禁用</el-tag>
            <el-tag v-if="props.row.status === 1" size="small" type="success">启用</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="props">
            <el-button v-if="props.row.status === 0" type="text" size="medium" @click="hanldleEnableUser(props.row)">启用</el-button>
            <el-button v-if="props.row.status === 1" type="text" style="color: #F56C6C" @click="hanldleDisableUser(props.row)">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

    <el-dialog :title="integrate.title" :visible.sync="integrate.show">
      <el-table :data="integrate.tableIntegrateList" v-loading="integrate.tableLoading" ref="integrateTableData" border
                fit stripe>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="mark" label="名称" align="center"></el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="integration" label="积分" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.action === 2" style="color:#F56C6C;">-</span>
            <span v-if="scope.row.action === 1" style="color:#67C23A;">+</span>
            {{scope.row.integration}}
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="时间" align="center">
          <template slot-scope="scope">
            {{scope.row.addTime | glbTimeFormat}}
          </template>
        </el-table-column>
      </el-table>
      <PaginationBack @pageChange="getPages" :pageDefultData="{
        pageNum: integrate.pageNum,
        pageRow: integrate.pageSize,
        totalCount: integrate.total }">
      </PaginationBack>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="integrate.show = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { ExportList, ExportStr } from '@/utils'
import { GetMemberList, EditMember } from '@/api/member'
import { GetIntegralLog } from '@/api/integral'
import PaginationBack from '@/components/Pagination/back'

export default {
  name: 'memberList',
  components: { PaginationBack },
  data () {
    return {
      query: {
        keyword: '',
        type: '',
        orderBy: '',
        sort: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      orderStatusList: ExportList('orderStatusList'),
      integrate: {
        show: false,
        title: '',
        tableIntegrateList: [],
        tableLoading: false,
        mobile: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    } // return
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      let params = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      GetMemberList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSelectionChange (selection) {
      this.tableSelectList = selection
    },
    handleSearch () {
      this.handleClearSort()
      this.query.pageNum = 1
      this.getList()
    },
    hanldleEnableUser (row) {
      this.$confirm(`确定要启用该账户吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        EditMember({ id: row.id, status: 1 }).then(res => {
          this.getList()
        }).catch(() => { })
      }).catch(() => { })
    },
    hanldleDisableUser (row) {
      this.$confirm(`确定要禁用该账户吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        EditMember({ id: row.id, status: 0 }).then(res => {
          this.getList()
        }).catch(() => { })
      }).catch(() => { })
    },
    handleOpenLog (row) {
      this.integrate.show = true
      this.integrate.title = row.nickname + ' 积分明细'
      this.integrate.mobile = row.phone
      this.integrate.pageSize = 10
      this.getIntegral()
    },
    getIntegral () {
      const params = {
        mobile: this.integrate.mobile,
        pageNum: this.integrate.pageNum,
        pageSize: this.integrate.pageSize
      }
      this.integrate.tableLoading = true
      GetIntegralLog(params).then(res => {
        this.integrate.tableLoading = false
        const data = res.data
        this.integrate.tableIntegrateList = data.list
        this.integrate.total = data.total
      }).catch(e => {
        this.integrate.tableLoading = false
      })
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    },
    getPages (val) {
      this.integrate.pageNum = val.pageNum
      this.integrate.pageSize = val.pageRow
      this.getIntegral()
    },
    dealListStr (key, type) {
      return ExportStr(key, type)
    },
    sortTableData ({ column, prop, order }) {
      // column 列属性 prop 排序字段 order[descending, ascending] 升降序
      this.query.orderBy = prop
      if (order) {
        this.query.sort = order.indexOf('asc') > -1 ? 'asc' : 'desc'
      } else {
        this.query.sort = ''
      }
      this.query.page = 1
      this.getList()
    },
    // 清除排序
    handleClearSort () {
      this.$refs.tableData.clearSort()
      this.query.orderBy = ''
      this.query.sort = ''
    }

  }
}

</script>
<style lang='scss' scoped>
</style>
